<template>
  <div class="user">
    <el-form :model="info"
             label-position="left"
             label-width="100px">
      <el-form-item label="头像 :">
        <div class="item">
          <div class="txt">
            <p class="author">
              <img src="../../../static/头像.png"
                   alt="阿卡林">
            </p>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="管理者昵称 :">
        <div class="item">
          <div class="txt">
            <p class="">{{info.nickname}}</p>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="管理者ID :">
        <div class="item">
          <div class="txt">
            <p class="">{{info.admnum}}</p>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="自我简介 :">
        <div class="item">
          <div class="txt">
            <p class="">{{ info.introduce | emptyFun}}</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="联系电话 :">
        <div class="item">
          <div class="txt">
            <p class="">{{ info.telenumber | emptyFun}}</p>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      //基本数据
      info: {
        nickname: '阿卡林',
        admnum: '001',
        introduce: '完全没有存在感',
        telenumber: '337845818',
      },
    }
  },
  methods: {},
  components: {
  }
}
</script>
<style scoped lang="scss">
.user {
  padding: 20px 30px;
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .txt {
      font-size: 14px;
      p {
        color: #000000;
        margin: 0;
        padding: 0;
      }
      .author {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        background: #cccccc;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
